<template>
  <div class="container">
    <searchNav />

    <div class="back-btn" @click="goBack">
      <img
        src="../../../..//src/assets/msg/icon-back.svg"
        style="width: 20px; height: 20px"
        alt=""
      />
    </div>
    <div class="container-body">
      <div class="password-box">
        <div class="box-content">
          <textarea
            name=""
            v-model="content"
            placeholder="请留下您的宝贵意见和建议"
            cols="30"
            rows="10"
            class="textarea-stye"
          ></textarea>
        </div>
        <div class="box-content">
          <input type="text" v-model="phone" placeholder="请留下您的联系方式" class="input-stye" />
        </div>

        <div class="confirm-btn">
          <van-button
            type="primary"
            :loading="loading"
            class="sum-btn"
            style="width: 320px"
            @click="commitFeedbackBtn"
            ><span style="color: #ffffff; font-weight: 500; font-family: Source Han Sans CN">
              确定
            </span></van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import QuotaServe from '@/api/quota'
import { ref, reactive, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import searchNav from './components/searchNav.vue'
const router = useRouter()
const content = ref('')
const phone = ref('')
const loading = ref(false)
function goBack(): void {
  router.go(-1)
}
//点击确定
const commitFeedbackBtn = async () => {
  loading.value = true
  try {
    await QuotaServe.commitFeedback({
      content: content.value,
      phone: phone.value
    }).then(resp => {
      loading.value = false
      console.log('resp', resp)
      ElMessage({
        message: '意见提交成功，感谢您的反馈。',
        type: 'success'
      })
      router.go(-1)
    })
  } catch (error) {
    loading.value = false
    console.log(error)
  }
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  height: 811px;
}
.title {
  display: flex;
  margin-top: 3vh;
  position: relative;
  width: 100%;
}
.back-btn {
  width: 50px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-right: 10px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 10;
}
.container-body {
  position: absolute;
  top: 100px;
  width: 100%;
  height: 88%;
  z-index: 11;
  border: 1px solid transparent;
  border-radius: 19.23px 19.23px 0px 0px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .password-box {
    width: 90%;
    height: 95%;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    background: #ffffff;
    border-radius: 10px;
  }
}
.box-content {
  display: flex;
  margin: 5px 10px;
  padding-bottom: 10px;
  // border-bottom: 0.32px solid rgba(226, 226, 226, 0.5);
  font-size: 13px;
  color: #444444;
  font-family: 'PingFang SC';
}
.box-content:first-child {
  margin-top: 20px;
}
.password-left {
  line-height: 30px;
}
.input-style {
  border: 1px solid transparent;
  width: 240px;
  font-size: 13px;
}
.confirm-btn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
.sum-btn {
  width: 320px;
  background: #4389f3;
  border-radius: 7.69px;
  border: 1px solid transparent;
  height: 50px;
}
.textarea-stye {
  border: 1px solid #bbbbbb;
  width: 100%;
  padding-top: 5px;
  padding-left: 10px;
}
.input-stye {
  border: 1px solid #bbbbbb;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 10px;
}
</style>
